<template>
  <div class="user mbm">
    <a-form layout="inline" :form="formAuth" @submit="submitAuth">

      <h4 class="step_title mbm">登录安全设置</h4>
      <div class="label">新密码：</div>
      <div class="wrapper mbs">
        <a-form-item>
          <a-input
            class="password_input mrm"
            style="width: 300px"
            placeholder="请输入新的密码"
            v-decorator="['password1',{ rules: [{ required: true, message: '这里不能为空哦！' }] }]"
          />
        </a-form-item>
      </div>
      <div class="label">确认密码：</div>
      <div class="wrapper mbs">
        <a-form-item>
          <a-input
            class="password_input mrm"
            style="width: 300px"
            placeholder="请再次输入新密码"
            v-decorator="['password2',{ rules: [{ required: true, message: '这里不能为空哦！' }] }]"
          />
        </a-form-item>
      </div>

      <a-form-item>
        <a-button class="mbm" type="primary" html-type="submit">立即修改</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
<script>
export default {
  data() {
    const labelCol = {
      xs: { span: 5 },
      sm: { span: 5 }
    };
    const wrapperCol = {
      xs: { span: 24 },
      sm: { span: 12 }
    };
    return {
      formItemLayout: {
        labelCol,
        wrapperCol
      },
      buttonCol: {
        xs: { offset: labelCol.xs.span },
        sm: { offset: labelCol.sm.span }
      },
      password1: "",
      password2: ""
    };
  },
  created() {
    this.formAuth = this.$form.createForm(this, {
      name: "form_auth"
    });    
  },
  methods: {
    submitAuth(e) {
      e.preventDefault();
      this.formAuth.validateFields((err, values) => {
        if (!err) {
          this.$api.auth
            .update({
              password1: values.password1,
              password2: values.password2
            })
            .then(() => {
              this.$message.info("密码已经修改！");
            })
            .catch(err => {
              console.log(err);
            });
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
</style>